<template>
    <div class="box" v-resize="handleResize">
		<!-- <Card :bordered="false" dis-hover class="ivu-mt">
			<Form
			  ref="formValidate"
			  :model="formValidate"
			  :label-width="labelWidth"
			  :label-position="labelPosition"
			  @submit.native.prevent
			>
				<FormItem label="时间筛选：">
					<DatePicker
					   :editable="false"
					   @on-change="onchangeTime"
					   :value="timeVal"
					   format="yyyy/MM/dd"
					   type="daterange"
					   placement="bottom-start"
					   placeholder="自定义时间"
					   style="width: 250px"
					   :options="options"
					></DatePicker>
				</FormItem>
			</Form>
		</Card>
		<cards-data :cardLists="cardLists"></cards-data>
		<Row :gutter="24"  class="ivu-mt Box" v-if="false">
			<Col  :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
				<div class="fonts">
					<div class="name">营业趋势</div>
				</div>
				<echarts-new ref="visitChart" :option-data="optionData" :styles="style" height="100%" width="100%" v-if="optionData"></echarts-new>
			</Col>
		</Row>
		<Row :gutter="24"  class="ivu-mt" v-if="false">
			<Col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" >
				<Card :bordered="false" dis-hover>
					<div class="acea-row row-between-wrapper fonts">
						<div class="name">订单来源统计</div>
						<RadioGroup v-model="orderNum" type="button">
							<Radio :label="0">
								<span class="iconfont icontongji"></span>
							</Radio>
							<Radio :label="1">
								<span class="iconfont iconbiaoge1"></span>
							</Radio>
						</RadioGroup>
					</div>
					<Table ref="selection" :columns="columnsOrder" :data="dataOrder" :loading="loading" height="400"
						   no-data-text="暂无数据" highlight-row
						   no-filtered-data-text="暂无筛选结果" v-if="orderNum">
						<template slot-scope="{ row, index }" slot="percent">
							<div style="width: 90%">
								<Progress :percent="row.percent" :stroke-width="5">
									<span style='color:#808695;'>{{row.percent}}%</span>
								</Progress>
							</div>
						</template>
					</Table>
					<echarts-new :option-data="circularData" :styles="style" height="100%" width="100%" v-if="circularData && !orderNum"></echarts-new>
				</Card>
			</Col>
		    <Col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
		        <Card :bordered="false" dis-hover>
					<div class="acea-row row-between-wrapper fonts">
						<div class="name">订单类型分析</div>
						<RadioGroup v-model="typeNum" type="button">
							<Radio :label="0">
								<span class="iconfont icontongji"></span>
							</Radio>
							<Radio :label="1">
								<span class="iconfont iconbiaoge1"></span>
							</Radio>
						</RadioGroup>
					</div>
					<Table ref="selection" :columns="columnsType" :data="dataType" :loading="loading" height="400"
					       no-data-text="暂无数据" highlight-row
					       no-filtered-data-text="暂无筛选结果" v-if="typeNum">
						   <template slot-scope="{ row, index }" slot="percent">
							   <div style="width: 90%">
								   <Progress :percent="row.percent" :stroke-width="5">
									   <span style='color:#808695;'>{{row.percent}}%</span>
								   </Progress>
							   </div>
						   </template>
					</Table>
					<echarts-new :option-data="circularDataType" :styles="style" height="100%" width="100%" v-if="circularDataType && !typeNum"></echarts-new>
		        </Card>
		    </Col>
		</Row> -->
				<template>
					<div id="card-box">
			<Row style="margin-top: 20px;">
				<Col>
					<Card  dis-hover>
						<p slot="title">帮助中心</p>
						<div>
								<div v-for="(item,index) in helpCenterListDate" :key="index">
									<div class="name desc-link"  @click="previewPdf(item.url)">{{ index+1 }}. {{item.title}}</div>
								</div>
						</div>
					</Card>
				</Col>
			</Row>
		</div>
		<Modal
		width="720"
        v-model="videoModalVisible"
        title="视频预览"
        :mask-closable="false"
        @on-ok="closeVideoModal"
        @on-cancel="closeVideoModal"
      >
        <div v-if="videoUrl" class="video-wrapper">
          <video
            ref="helpVideo"
            :src="videoUrl"
            controls
            autoplay
            muted
            playsinline
            class="video-player"
          ></video>
        </div>
    </Modal>
		</template>

<!--      <div class="open-image" v-if="openImage">-->
<!--        <img src="@/assets/images/wechat_demo.gif" alt="">-->
<!--        <span class="iconfont iconcha" @click="clear" ></span>-->
<!--      </div>-->
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import { headerApi, orderChannel, orderType, operateApi,helpCenterList } from '@/api/index'
	import echartsNew from '@/components/echartsNew/index'
	import cardsData from "@/components/cards/cards";
	import timeOptions from "@/utils/timeOptions";
	import { formatDate } from '@/utils/validate';
	export default {
		name: "home",
		components: { cardsData, echartsNew },
		data() {
			return{
				helpCenterListDate:[],
				videoModalVisible: false,
				videoUrl: '',
        openImage: true,
				loading:false,
				optionData:{},
				circularData:{},
				circularDataType:{},
				dataType:[],
				dataOrder:[],
				typeNum:1,
				orderNum:0,
				columnsType:[
					{
						title: '序号',
						key: 'index',
						minWidth: 100
					},
					{
						title: '类型',
						key: 'name',
						minWidth: 100
					},
					{
						title: '金额',
						key: 'value',
						minWidth: 100
					},
					{
						title: '占比率',
						slot: 'percent',
						minWidth: 100
					},
				],
				columnsOrder:[
					{
						title: '序号',
						key: 'index',
						minWidth: 100
					},
					{
						title: '来源',
						key: 'name',
						minWidth: 100
					},
					{
						title: '订单量',
						key: 'value',
						minWidth: 100
					},
					{
						title: '占比率',
						slot: 'percent',
						minWidth: 100
					},
				],
				formValidate: {
				  data: ""
				},
				style: { height: '400px' },
				options: timeOptions,
				timeVal: [],
				cardLists: [],
				infoList:{}
			}
		},
		computed: {
			...mapState('store/layout', [
			    'isMobile'
			]),
		  labelWidth() {
		    return this.isMobile ? undefined : 80;
		  },
		  labelPosition() {
		    return this.isMobile ? "top" : "right";
		  },
		},
		created(){
			const end = new Date()
			const start = new Date()
			start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
			this.timeVal = [start, end]
			this.formValidate.data = formatDate(start, 'yyyy/MM/dd')+ '-'+ formatDate(end, 'yyyy/MM/dd');
		},
		mounted() {
			this.$nextTick(function(){
				this.cardList()
				// this.trends()
				// this.circularChart();
				// this.getOrderType();
			})
		},
		methods:{
			previewPdf(url){ 
				if (!url) return;
				const lowerUrl = url.toLowerCase();
				if (lowerUrl.endsWith('.mp4')) {
					this.openVideoModal(url);
					return;
				}
				// 若需要内嵌预览，可换成自定义路由或 pdf.js 页面
				window.open(url, '_blank'); 
			},
			openVideoModal(url) {
				this.videoUrl = url;
				this.videoModalVisible = true;
				this.$nextTick(() => {
					const videoEl = this.$refs.helpVideo;
					if (videoEl) {
						videoEl.currentTime = 0;
						videoEl.play().catch(() => {});
					}
				});
			},
			closeVideoModal() {
				const videoEl = this.$refs.helpVideo;
				if (videoEl) {
					videoEl.pause();
					videoEl.currentTime = 0;
				}
				this.videoModalVisible = false;
				this.videoUrl = '';
			},
      clear () {
        this.openImage = false;
      },
			getOrderType(){
				orderType({data:this.formValidate.data}).then(res=>{
					let data = res.data.list,bingData = res.data.bing_data;
					data.forEach((item,index)=>{
						item.index = index+1
					});
					this.dataType = data;
					this.circularDataType = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [
							{
								name: '订单类型分析',
								type: 'pie',
								radius: '50%',
								center: ['50%', '50%'],
								data: bingData,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					}
				}).catch(err=>{
					this.$Message.error(err.msg)
				})
			},
			circularChart(){
				orderChannel({data:this.formValidate.data}).then(res=>{
					let data = res.data.bing_data,list = res.data.list;
					list.forEach((item,index)=>{
						item.index = index+1
					});
					this.dataOrder = list;
					this.circularData = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [
							{
								name: '订单来源统计',
								type: 'pie',
								radius: '50%',
								center: ['50%', '50%'],
								data: data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					}
				}).catch(err=>{
					this.$Message.error(err.msg)
				})
			},
			trends(){
				operateApi({data:this.formValidate.data}).then(async res => {
					const cardLists = res.data;
					this.infoList = cardLists;
					this.get(cardLists);
			    }).catch(res => {
			        this.$Message.error(res.msg)
			    })
			},
			get(extract){
				let legend = extract.series.map(item => {
					return item.name
				});
				let col = ['#5B8FF9', '#5AD8A6', '#FFAB2B', '#F5222D'];
				extract.series.forEach((item,index)=>{
					let style = {
						normal: {
							color: col[index]
						}
					}
					item.itemStyle = style
					item.smooth = true
				});
				this.optionData = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						x:'center',
						data: legend
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						show: true,
						right: '2%',
						feature: {
							saveAsImage: {
								name: '营业趋势_'+formatDate(new Date(Number(new Date().getTime())), 'yyyyMMddhhmmss')
							}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						axisLabel: {
							interval: 0,
							rotate: 40,
							textStyle: {
								color: '#000000'
							}
						},
						data: extract.xAxis
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#7F8B9C'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#F5F7F9'
							}
						}
					},
					series: extract.series
				}
			},
			// 具体日期
			onchangeTime(e) {
			  this.timeVal = e;
			  this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
			  // this.trends()
			  this.cardList()
			  // this.getOrderType();
			  // this.circularChart();
			},
			cardList(){
				headerApi({data:this.formValidate.data}).then(res=>{
					this.cardLists = [
					  {
					    col: 6,
					    count: res.data.pay_price,
					    name: $t('page.order.order') + $t('page.order.total'),
					    className: "icondingdanjine",
						type:1
					  },
					  {
					    col: 6,
					    count: res.data.pay_count,
					    name: $t('page.order.order') + $t('page.order.quantity'),
					    className: "icondingdanliang",
						type:1
					  },
					  {
					    col: 6,
					    count: res.data.commission,
					    name: $t('page.order.service') + $t('page.order.fee'),
					    className: "icontuikuanjine",
						type:1
					  },
					  {
						col: 6,
						count: res.data.await_count,
						name: $t('page.stock.waiting_settlement'),
						className: "icontuikuandingdanliang",
						type:1
					  }
					]
				})
				helpCenterList().then(res=>{
					this.helpCenterListDate = res.data
				})
			},
			// 监听页面宽度变化，刷新表格
			handleResize () {
				this.$refs.visitChart.wsFunc();
			}
		}
	}
</script>

<style scoped lang="less">
 .desc-link:hover{
	color: #620E80;
 }
 .desc-link{
	cursor: pointer;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 23px;
 }
#card-box  /deep/.ivu-card-body{
	max-height: 268px;
	min-width: 500px;
	overflow:auto;
}
	/deep/.ivu-progress-success .ivu-progress-bg{
		background-color: #2d8cf0!important;
	}
	.ivu-radio-group-button .ivu-radio-wrapper{
		color: #999999;
	}
	.ivu-radio-group-button .ivu-radio-wrapper-checked{
		color: #2d8cf0;
	}
	/deep/.ivu-mb{
		margin-bottom: 0!important;
	}
	.ivu-form-item{
		margin-bottom: 0;
	}
	.Box{background-color: #FFFFFF;margin-left: 0px !important;margin-right: 0px !important;padding-top: 20px;}
	.fonts{
		margin-bottom: 18px;margin-top: 2px;
		.name{
			font-weight: bold;
			font-size: 16px;
			color: #000;
			position: relative;
			padding-left: 10px;
			&:before{
				content: ' ';
				position: absolute;
				width: 2px;
				height: 17px;
				background-color: #2d8cf0;
				left: 0;
				top: 3px;
			}
		}
	}
  .open-image{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 130px;
    height: 580px;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 1000;
    cursor: pointer;
    img{
      width: 130px;
    }
    .iconfont{
      position: absolute;
      top: -20px;
      right: -20px;
      font-size: 20px;
      color: #ddd;
    }
  }
  .video-wrapper{
    width: 100%;
  }
  .video-player{
    width: 100%;
    max-height: 70vh;
    background: #000;
  }
</style>
